const echarts = require('echarts')
export function barOptions({ xData = [], yData = [] }) {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: ''
      },
      backgroundColor: 'rgba(13,75,201,0)',
      borderColor: 'rgba(255,255,255,0)',
      padding: 0,
      formatter(params: any) {
        let html = ''
        params.forEach((item: any) => {
          /* eslint-disable */
          html += `<span
          style='display:block; width:100px; height:26px; line-height: 23px; background: linear-gradient(to right, #22B3F0 0%,#0D4BC9 100%); color:#fff;fontWeight:500; fontFamily:PingFang Regular; fontSize:16px; border-radius: 13px;padding: 0 9px'>
          ${item.name} : ${item.value}
          </span>`
        })
        return html
      }
    },
    grid: {
      top: '20%',
      right: '3%',
      left: '5%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        data: xData,
        axisLine: {
          lineStyle: {
            color: 'rgba(4,187,255,0.18)'
          }
        },
        axisLabel: {
          margin: 10,
          // color: '#e2e9ff',
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.5)',
            fontFamily: 'PingFang Regular'
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          // 刻度线是否显示
          show: false
        }
      }
    ],
    yAxis: [
      {
        name: '件数',
        nameTextStyle: {
          color: 'rgba(255,255,255,0.5)',
          fontSize: 12,
          align: 'right',
          fontFamily: 'PingFang Regular'
          // lineHeight: 40
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: 'rgba(255,255,255,0.5)',
            fontSize: 12,
            fontFamily: 'PingFang Regular'
          }
        },
        axisLine: {
          show: false
        },
        splitLine: {
          lineStyle: {
            width: 1,
            type: 'dotted',
            color: 'rgba(4,187,255,0.18)'
          }
        }
      }
    ],
    series: [
      {
        type: 'bar',
        // data: [300, 450, 770, 203, 255, 188, 156],
        data: yData,
        barWidth: '16px',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(1,180,255,1)' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(3,54,255,1)' // 100% 处的颜色
                }
              ],
              false
            ),
            barBorderRadius: [7, 7, 0, 0]
          }
        },
        label: {
          normal: {
            show: false
          }
        }
      }
    ]
  }
}
// export function barOptions(xData = [], yData = []) {
//   return {
//     grid: {
//       top: 40,
//       left: 25,
//       containLabel: true,
//       bottom: 20
//     },
//     tooltip: {
//       trigger: 'axis',
//       backgroundColor: 'rgba(13,75,201,0)',
//       borderColor: 'rgba(255,255,255,0)',
//       padding: 0,
//       formatter(params: any) {
//         let html = ''
//         params.forEach((item: any) => {
//           /* eslint-disable */
//           html += `<span 
//           style='display:block; width:100px; height:26px; line-height: 23px; background: linear-gradient(to right, #22B3F0 0%,#0D4BC9 100%); color:#fff;fontWeight:500; fontFamily:PingFang Regular; fontSize:16px; border-radius: 13px;padding: 0 9px'>
//           人次 : ${item.value}
//           </span>`
//         })
//         return html
//       }
//       // formatter: '{a0}: {c0}'
//     },
//     xAxis: [
//       {
//         type: 'category',
//         boundaryGap: false,
//         axisLabel: {
//           formatter: '{value}',
//           fontSize: 12,
//           margin: 20,
//           textStyle: {
//             color: 'rgba(255,255,255,0.5)'
//           }
//         },
//         axisLine: {
//           show: false
//           // lineStyle: {
//           //     color: '#243753'
//           // }，
//         },
//         splitLine: {
//           show: false,
//           lineStyle: {
//             color: '#243753'
//           }
//         },
//         axisTick: {
//           show: false
//         },
//         data: xData
//       }
//     ],
//     yAxis: [
//       {
//         name: '件数',
//         boundaryGap: false,
//         type: 'value',
//         axisLabel: {
//           textStyle: {
//             color: 'rgba(255,255,255,0.5)'
//           }
//         },
//         nameTextStyle: {
//           color: 'rgba(255,255,255,0.5)',
//           fontSize: 12,
//           align: 'right'
//           // lineHeight: 40
//         },
//         splitLine: {
//           lineStyle: {
//             color: '#243753',
//             type: 'dashed'
//           }
//         },
//         axisLine: {
//           show: false,
//           lineStyle: {
//             color: '#283352'
//           }
//         },
//         axisTick: {
//           show: false
//         }
//       }
//     ],
//     series: [
//       {
//         name: '人次',
//         type: 'line',
//         smooth: true,
//         showSymbol: true,
//         symbolSize: 0,
//         zlevel: 3,
//         itemStyle: {
//           color: '#19a3df',
//           borderColor: '#a3c8d8'
//         },
//         lineStyle: {
//           normal: {
//             width: 2,
//             // color: '#1E8BFF'
//             color: 'rgba(0,216,255,0.55)'
//           }
//         },
//         areaStyle: {
//           normal: {
//             color: new echarts.graphic.LinearGradient(
//               0,
//               0,
//               0,
//               1,
//               [
//                 {
//                   offset: 0,
//                   color: 'rgba(30,139,255,.9)'
//                 },
//                 {
//                   offset: 0.5,
//                   color: 'rgba(30,139,255,.5)'
//                 },
//                 {
//                   offset: 1,
//                   color: 'rgba(30,139,255,0)'
//                 }
//               ],
//               false
//             )
//           }
//         },
//         data: yData
//       }
//     ]
//   }
// }
